<template>
    <el-card shadow="never">
        <div class="title_box">
            <div>邀请记录</div>
            <el-button :disabled="!tableData.length" @click="onExportExcel">导出</el-button>
        </div>
        <el-divider />
        <div class="customer_list_search" style="padding: 0">
            <div v-if="tableData.length">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    stripe
                    class="table-box"
                    header-row-class-name="table_header_title">
                    <el-table-column label="企微外部群信息" width="300" fixed>
                        <template #default="scope">
                            <div class="group-info">
                                <img :src="scope.row.groupchat.avatar" alt="" />
                                <div class="group-name">
                                    <div>{{ scope.row.groupchat.name }}</div>
                                    <div>群主：{{ scope.row.groupchat.owner_username }}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="所在区域" width="250" prop="region_name"> </el-table-column>
                    <el-table-column label="行政地区" width="250" prop="pca">
                        <template #default="scope">
                            <span v-if="scope.row.pca?.length">{{
                                scope.row.pca.map(v => v.pca_name).join('、')
                            }}</span>
                            <span v-else> -- </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="建群时间" prop="last_join_time" min-width="260">
                        <template #default="scope">
                            <span>
                                {{ scope.row.groupchat?.created_at || '--' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="last_join_time" min-width="260">
                        <template #header>
                            <el-popover placement="top-start" trigger="hover" content="通过该活动最后进群人的时间">
                                <template #reference>
                                    <div class="title">
                                        最近入群时间
                                        <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                                    </div>
                                </template>
                            </el-popover>
                        </template>
                        <template #default="scope">
                            <span>
                                {{ scope.row.last_join_time || '--' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="群成员数量" min-width="180">
                        <template #default="scope">
                            <span>
                                {{ scope.row.groupchat?.member_nums || '--' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="进群人数" prop="join_num" min-width="180"></el-table-column>
                    <el-table-column label="退群人数" prop="quit_num" min-width="180"></el-table-column>
                    <el-table-column label="可触达客户数" prop="touch_num" min-width="180"></el-table-column>
                    <el-table-column label="操作" min-width="120" fixed="right">
                        <template #default="scope">
                            <div class="btn-box">
                                <el-button size="small" @click="toGroupDetail(scope.row.groupchat?.id)"
                                    >群详情</el-button
                                >
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
        </div>
        <ZWPagination ref="PaginationRef" @submit="pageChangeFun" />
    </el-card>
</template>

<script setup lang="ts">
import { ref, inject, nextTick, watch, withDefaults, defineProps, defineEmits, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { statdetailList, statexportList } from '@/api/customer/groupManage/lbspullgroup';
import { useStore } from '@/store';
import { DOWLOAD_FILE } from '@/utils/smartMarketing';
import ZWPagination from '@/components/ZWPagination.vue';
import CollectPopup from './CollectPopup.vue';
import html2canvas from 'html2canvas';

interface Props {
    paramselist: any;
}

const router = useRouter();
const store = useStore();
const props = withDefaults(defineProps<Props>(), {
    paramselist: () => {
        return {
            data: []
        };
    }
});
const emit = defineEmits(['submitdetailed']);
const PaginationRef = ref<any>(null);
const CollectPopupRef = ref<any>(null);
const CollectPopupData = ref([]);
const pageType = ref(1);
const tableData = ref<Array<any>>([]);
const formData: any = ref({
    page: 1,
    page_size: 15
});
const onBtnChange = (v: any) => {
    formData.value.type = v;
    formData.value.page = 1;
    //切换的时候需要重置page
    nextTick(() => {
        PaginationRef.value.initPage = true;
        store.dispatch('pageTotal', 0);
        getstatdetailListFun();
    });
};
const getTagType = (val: number) => {
    switch (val) {
        case 0:
            return 3;
        case 1:
            return 1;
        case 2:
            return 2;
    }
};

// 当前分页改变
const pageChangeFun = (val: any) => {
    formData.value.page = val.page;
    formData.value.page_size = val.page_size;
    getstatdetailListFun();
};
// 统计详细数据
const getstatdetailListFun = (data?: any) => {
    // formData.value.type=data||1
    const params = {
        ...props.paramselist,
        ...formData.value
    };
    statdetailList(params).then((res: any) => {
        tableData.value = res.list;
        store.dispatch('pageTotal', res.total);
    });
};
const onSubmit = () => {
    getstatdetailListFun();
};
const onReset = () => {
    formData.value.tag = [];
    formData.value.name = '';
    getstatdetailListFun();
};
// 统计详细数据
const visible = ref<boolean>(false);
const coverImage = ref<string>('');
const controlCardColumns = reactive<Array<any>>([]);
const title = ref<string>('');
const onExport = (options = {}) => {
    const container: any = document.querySelector('.preview-card-form.previre-form');
    // 设置放大倍数
    const scale = 1;

    // 传入节点原始宽高
    const _width = container.offsetWidth * 2;
    const _height = container.offsetHeight * 2;
    // html2canvas配置项
    const ops = {
        scale,
        _width,
        _height,
        useCORS: true,
        allowTaint: false,
        ...options
    };
    return html2canvas(container, ops).then(canvas => {
        // 返回图片的二进制数据
        const pageData = canvas.toDataURL('image/png', 1.0);
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = pageData;
        link.setAttribute('download', '收集表' + '.png');
        document.body.appendChild(link);
        link.click();
    });
};
const onExportExcel = (data?: any) => {
    const params = {
        ...props.paramselist,
        ...formData.value
    };
    statexportList(params).then((res: any) => {
        // tableData.value = res.data
        DOWLOAD_FILE(res.url, res.name);
    });
};
const toGroupDetail = (id: string | number) => {
    router.push(`/customer/groupManage/list/detail?id=${id}`);
};
watch(
    () => props.paramselist,
    v => {
        nextTick(() => {
            // paramsechart.value=v
            // getEchartsLine()
        });
    },
    { deep: true }
);
defineExpose({
    getstatdetailListFun
});
</script>

<style lang="scss" scoped>
@mixin fz-m($fontSize: 16px) {
    font-size: $fontSize;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-weight: 500;
    color: #33302d;
}

@mixin fz-r($fontSize: 14px) {
    font-size: $fontSize;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
    color: #33302d;
}

.help_icon {
    vertical-align: baseline;
    margin-left: 8px;
    width: 14px;
}

:deep.el-tag.el-tag--warning {
    margin-right: 10px;
}

:deep.el-card {
    margin-top: 20px;
}

.title_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-divider {
    margin-top: 8px;
    margin-bottom: 16px;
}

#echarts {
    display: flex;
    justify-content: center;
    height: 320px;
}

.empty_img {
    transform: translateX(13%);
}

.customer_list_search {
    padding: 16px;
    margin: 20px 0;
    background-color: #f9f9f9;

    .item_box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;

        .el-form-item {
            :deep(.el-input__inner) {
                width: 100%;
            }

            margin: 0;

            .el-select {
                width: 100%;
            }

            .btn_box {
                text-align: right;
            }
        }
    }
}

.table-box {
    .crop {
        display: flex;
        align-items: center;

        .crop_awatar {
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }

        .crop_info {
            .crop_name {
                width: 130px;
                height: 23px;
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .crop_contact {
                font-size: 12px;
                color: #969696;

                .crop_contact_look {
                    color: #ff6b00;
                    cursor: pointer;
                }
            }
        }
    }

    .btn-box {
        text-align: left;

        div {
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;

            // width: 80px;
            height: 32px;
            background: #fff;
            border: 1px solid #eaeaea;
            text-align: center;
            line-height: 32px;
            margin: 0 6px 5px;
            min-height: 28px;
            padding: 0 15px;
            font-size: 12px;
            border-radius: calc(var(--el-border-radius-base) - 1px);
        }
    }
}

.group-info {
    position: relative;
    width: 180px;
    box-sizing: border-box;
    display: flex;
    padding: 6px;
    background: #fff;
    border-radius: 2px;
    border: 1px solid #eaeaea;

    @include fz-r;

    img:not(.close-icon) {
        margin-right: 10px;
        width: 36px;
        height: 36px;
    }

    .group-name {
        flex: 1;
        width: calc(100% - 80px);
        line-height: normal;

        div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        div:last-child {
            font-size: 12px;
            color: #969696;
        }
    }
}

:deep(.el-table--layout-fixed .el-table__header-wrapper tr th.el-table-fixed-column--right) {
    background-color: #f9f9f9;
}

:deep(.el-table.is-scrolling-left th.el-table-fixed-column--left) {
    background-color: #f9f9f9;
}
</style>
